<template>
    <div class="progress-circle">
        <!-- width 和 height是 宽高  viewBox="0 0 100 100"的意思是从（0，0）坐标开始向右和下延展满 -->
        <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="https://wwww.w3.org/2000/svg">
            <!-- r是半径 cx,cy是圆心的横纵坐标 -->
            <circle class="progress-background" r="50" cx="50" cy="50" file="transparent">

            </circle>
            <circle class="progress-bar" r="50" cx="50" cy="50" file="transparent"
             :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset">
            </circle>
        </svg>
        <slot></slot>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    props:{
        radius:{
            type:Number,
            default:100
        },
        percent:{
            type:Number,
            default:0.2
        }
    },
    data () {
        return {
            dashArray:Math.PI * 100
        }
    },
    computed: {
        dashOffset () {
            return (1-this.percent)*this.dashArray
        }
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.progress-circle {
    position: relative;

    circle {
        stroke-width: 8px;
        transform-origin: center;

        &.progress-background {
            transform: scale(0.9);
            stroke: $color-theme-d;
        }

        &.progress-bar {
            transform: scale(0.9) rotate(-90deg);
            stroke: $color-theme;
        }
    }
}
</style>
